<template>
	<view class="pages">
		<view>
			<view class="btnTop">发现隐患内容</view>
		</view>
		<view class="card" v-if="fxPoint">
			<view class="card_title">{{fxPoint.position}}</view>
			<!-- <view v-if="fxPoint.is_red" class="card-red">
				<text>紧急</text>
			</view> -->
			<!-- <view class="risk-type">
				<text>{{fxPoint.type}}</text>
			</view> -->
			<view class="row">
				<image src="../../static/1509161490928274.jpg" mode=""></image>
				<view>
					<text>网格负责人：{{fxPoint.zr_name}}</text>
					<text>责任人次：{{fxPoint.zr_num}}人</text>
				</view>
			</view>
			<view class="row">
				<image src="../../static/1509161490928274.jpg" mode=""></image>
				<view>
					<text>网格层级：{{fxPoint.wg_cj}}</text>
				</view>
			</view>
			<view class="row">
				<image src="../../static/1509161490928274.jpg" mode=""></image>
				<view>
					<view><text>月总巡检数：{{fxPoint.should_check}}次</text><text>当月已巡检数：{{fxPoint.has_check}}次</text><text>100%</text></view>
					<view><text>月隐患总数：{{fxPoint.danger_num}}次</text><text>已处理隐患数：{{fxPoint.handle_danger}}次</text><text>100%</text></view>
					<view><text>待验收隐患：{{fxPoint.noaccept_danger}}次</text><text>以验收隐患数：{{fxPoint.accept_danger}}次</text><text>100%</text></view>
				</view>
			</view>
		</view>
		
		
		<view class="card"  v-for="(item,index) in fxman" :key="index">
			<view class="card_title">{{item.position}}</view>
			<view class="row">
				<image src="../../static/1509161490928274.jpg" mode=""></image>
				<view>
					<text>风险点责任人：{{item.u_name}}</text>
					<text>部门职务：{{item.job}}人</text>
				</view>
			</view>
			<view class="row">
				<image src="../../static/1509161490928274.jpg" mode=""></image>
				<view>
					<view><text>巡检周期：{{item.cycle}}</text><text>待整改隐患：共{{item.undo}}条</text></view>
					<view><text>月检查数：共{{item.month_check}}次</text><text>超期未整改：共{{item.after_undo}}条</text></view>
					<view><text>已检查数：共{{item.checked}}次</text><text>待验收隐患数：共{{item.un_accept}}次</text></view>
					<view><text>最近巡检：{{item.last_checktime}}</text></view>
				</view>
			</view>
			<uni-collapse :accordion="true">
				<uni-collapse-item v-for="val in accordion" :key="val.id" :title="val.title" :show-animation="val.animation">
					<view class="content">
						<view class="row">
							<view class="card_title">网格风险责任人详情</view>
							<view>
								<view><text>风险名称：{{item.fx_title}}</text><text>风险等级：{{item.fx_status}}</text></view>
								<view><text>风险区域：{{item.area}}</text><text>管控级别：{{item.level}}</text></view>
								<view><text>责任人：</text><text>网格责任：</text></view>
							</view>
						</view>
						<view class="row">
							<view class="card_title">网格责任人任务信息</view>
							<view>
								<view><text>责任人：{{item.zr_man}}</text><text>巡层等级：{{item.cengji}}</text></view>
								<view><text>部门职务：{{item.bumenzhiwu}}</text><text>巡检周期：{{item.xunjianzhouqi}}</text></view>
							</view>
						</view>
						<view class="row">
							<view class="card_title">风险点检查内容及注意事项</view>
							<view>
								<view><text>本月巡检任务总数：共 次</text></view>
								<view><text>本月已巡检任务数：共 次</text></view>
								<view><text>本月发现整改隐患：共 次</text></view>
								<view class="navgater" @click="gopagedeli(item.detail,item.u_name)">查看详情</view>
							</view>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
		
	</view>
</template>

<script>
	
		import API from '../../common/api.js';
		import uniCollapse from '@/components/uni-collapse/uni-collapse.vue'
		import uniCollapseItem from '@/components/uni-collapse-item/uni-collapse-item.vue'
		export default {
			components: {
				uniCollapse,
				uniCollapseItem
			},
			data() {
				return {
					accordion: [
						{
							id: 0,
							title: '详情',
							content: '手风琴效果',
							animation: true
						}
					],
					id: 2,
					fxPoint: false,
					fxman: false,
				}
			},
			onLoad() {
				this.fxPointDetail();
			},
			methods: {
				gopagedeli(item,u_name){
					item  = JSON.stringify(item)
					uni.navigateTo({
						url:'fengxianguankong.1?item='+item+'&u_name='+u_name
					})
				},
				change(e) {
					//console.log(e)
				},
				fxPointDetail(){
					var that = this;
					uni.request({
						url:API.fxPointDetail,
						method:"GET",
						data:{
							fxpoint_id:uni.getStorageSync("ssp_point")
						},
						header:API.get_head(),
						success: (res) => {
							console.log("getMoreSubUser==>", res);
							that.fxPoint = res.data.data.fxPoint;
							that.fxman = res.data.data.fxman;
							
							if(res.data.message != "success"){
								uni.showToast({
									title:res.data.message,
									icon:"none"
								});
							}
						},
						fail: () => {
							uni.showToast({
								title:"加载失败",
								icon:'none'
							})
						}
					});
				}
			}
		}
</script>

<style>
	page{overflow: auto;}
	.btnTop{
		background:#ce0402;
		padding:5upx 10upx;
		display: inline-block;
		border-radius:10upx;
		margin:30upx 40upx;
		color:#FFFFFF;
	}
	.card{padding:40upx 20upx;margin:0 20upx 20upx 20upx;background:#FFFFFF;overflow: hidden;position: relative;}
	.card_title{color:#333;margin-bottom: 30rpx;
		font-weight: 700;
		font-size: 36rpx;
	}
	.card>.row{display: flex;justify-content: flex-start;margin-bottom:20upx;}
	.row image{width:40upx;height:40upx;vertical-align:middle;margin-right:20upx;}
	.row text{margin-right:20upx;color:#666666;font-size: 26rpx;}
	uni-collapse .uni-collapse-cell__title{text-align: right;padding-right: 20upx;}
	uni-collapse .uni-collapse-cell--open{
		background-color: #FFFFFF;
	}
	uni-collapse .content{
		background-color: #f5f5f5;
	}
	uni-collapse .content .row{
		padding: 30upx 20upx;
		background-color: #FFFFFF;
	}
	uni-collapse .content .row:nth-child(n+2){
		margin-top: 20upx;
	}
	uni-collapse .content .row>view>view{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	uni-collapse .content .row>view>view text{
		flex: 1;
	}
	.navgater{
		width: 250upx;
		border-radius: 60upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		color: #FFFFFF;
		background-color: #067AEE;
		margin: 20upx auto 0;
	}
	.uni-collapse-cell.uni-collapse-cell--open{
		background:#FFFFFF !important;
	}
	
</style>
